<template>
    <el-menu-item index="10" @click="handleClick">实时路况</el-menu-item>
</template>

<script setup>
import { Query } from "@/api/mapgis-api/Query";
import { onMounted, getCurrentInstance, ref } from "vue";
import { setLineStyle } from "../../api/ol-api/setStyle";
const { proxy } = getCurrentInstance();
const source = new ol.source.Vector({});
const layer = new ol.layer.Vector({
    source: source,
});

// 服务配置
let service = {
    docName: import.meta.env.VITE_MAPGIS_DOC_NAME,
    layerId: 1,
};

onMounted(() => {
    const map = proxy.$map;
    map.addLayer(layer);
});
let isToggle = ref(false);

// 点击事件
function handleClick() {
    isToggle.value = !isToggle.value;
    if (isToggle.value) {
        Query.queryByLayerId(service).then((features) => {
            features.forEach((feature) => {
                const flow = feature.values_.values_.车流量;
                let style;
                if (flow > 1800) {
                    style = setLineStyle({ color: "blue", width: 10 });
                } else if (flow > 1500) {
                    style = setLineStyle({ color: "green", width: 10 });
                } else if (flow > 1000) {
                    style = setLineStyle({ color: "yellow", width: 10 });
                } else if (flow > 500) {
                    style = setLineStyle({ color: "red", width: 10 });
                }
                if (style) {
                    feature.setStyle(style);
                }
                source.addFeature(feature);
            });
        });
    } else {
        source.clear();
    }
}
</script>

<style scoped></style>
